<template>
	<view class="page">
		<UserBar />
		<view class="gap"></view>
		<CellItem v-if="userStore.normal" @tap="onChangePssword" />
		<CellItem v-if="userStore.admin" :icon="IconUser" text="用户管理" @tap="onManageUser" />
		<CellItem v-if="userStore.admin" :icon="IconMenu" text="创建新菜" @tap="onCreateDishes" />
		<CellItem :icon="IconMenu" text="退出登录" @tap="onLogout" />
	</view>
</template>

<script setup>
import UserBar from './UserBar.vue';
import CellItem from './CellItem.vue';

import { useUserStore } from '../../stores/useUserStore';
import { showDialog } from '../../hooks/useConfirm';

import IconPassword from '../../static/icons/settings_password.png';
import IconMenu from '../../static/icons/settings_menu.png';
import IconUser from '../../static/icons/settings_user.png';

const userStore = useUserStore();

const onChangePssword = () => {
	uni.navigateTo({
		url: '/pages/change-password/change-password',
	});
};
const onManageUser = () => {
	uni.navigateTo({
		url: '/pages/manage-users/manage-users',
	});
};
const onCreateDishes = () => {
	uni.navigateTo({
		url: '/pages/create-dishes/create-dishes',
	});
};

const onLogout = async () => {
	const confirm = await showDialog({ title: '退出', content: '确定退出登录吗？' });
	if (!confirm) return;

	const userStore = useUserStore();
	userStore.logout();

	uni.reLaunch({
		url: '/pages/login/login',
	});
};
</script>

<style scoped>
.page {
	width: 100%;
	height: 100%;

	overflow: auto;
	background-color: #f8f8f8;
}

.gap {
	height: 40rpx;
	background-color: transparent;
}

.cell-item {
	border-bottom: 1px solid #efefef;
}

.cell-item:last-child {
	border-bottom: none;
}
</style>
